<template>
  <div class="home-page">
    <!-- 功能模块卡片 -->
    <div class="module-sections">
      <!-- 档案管理 -->
      <div class="module-section">
        <h3 class="section-title">档案管理</h3>
        <div class="module-grid">
          <div class="module-card" @click="$router.push('/archives/personal')">
            <div class="module-icon">
              <svg viewBox="0 0 1024 1024" width="48" height="48">
                <path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.413333 170.666667 170.666667 323.413333 170.666667 512s152.746667 341.333333 341.333333 341.333333 341.333333-152.746667 341.333333-341.333333S700.586667 170.666667 512 170.666667z m0 128a42.666667 42.666667 0 0 1 42.666667 42.666666v128a42.666667 42.666667 0 0 1-85.333334 0V341.333333A42.666667 42.666667 0 0 1 512 298.666667z m0 298.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v128a42.666667 42.666667 0 0 1-85.333334 0v-128A42.666667 42.666667 0 0 1 512 597.333333z" fill="#409EFF"/>
              </svg>
            </div>
            <span class="module-name">个人档案管理</span>
          </div>
          
          <div class="module-card" @click="$router.push('/archives/group')">
            <div class="module-icon">
              <svg viewBox="0 0 1024 1024" width="48" height="48">
                <path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.413333 170.666667 170.666667 323.413333 170.666667 512s152.746667 341.333333 341.333333 341.333333 341.333333-152.746667 341.333333-341.333333S700.586667 170.666667 512 170.666667z m0 128a42.666667 42.666667 0 0 1 42.666667 42.666666v128a42.666667 42.666667 0 0 1-85.333334 0V341.333333A42.666667 42.666667 0 0 1 512 298.666667z m0 298.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v128a42.666667 42.666667 0 0 1-85.333334 0v-128A42.666667 42.666667 0 0 1 512 597.333333z" fill="#67C23A"/>
              </svg>
            </div>
            <span class="module-name">团体档案管理</span>
          </div>
          
          <div class="module-card" @click="$router.push('/archives/search')">
            <div class="module-icon">
              <svg viewBox="0 0 1024 1024" width="48" height="48">
                <path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.413333 170.666667 170.666667 323.413333 170.666667 512s152.746667 341.333333 341.333333 341.333333 341.333333-152.746667 341.333333-341.333333S700.586667 170.666667 512 170.666667z m0 128a42.666667 42.666667 0 0 1 42.666667 42.666666v128a42.666667 42.666667 0 0 1-85.333334 0V341.333333A42.666667 42.666667 0 0 1 512 298.666667z m0 298.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v128a42.666667 42.666667 0 0 1-85.333334 0v-128A42.666667 42.666667 0 0 1 512 597.333333z" fill="#E6A23C"/>
              </svg>
            </div>
            <span class="module-name">档案查询</span>
          </div>
        </div>
      </div>
      
      <!-- 体检管理 -->
      <div class="module-section">
        <h3 class="section-title">体检管理</h3>
        <div class="module-grid">
          <div class="module-card" @click="$router.push('/checkup/appointment')">
            <div class="module-icon">
              <svg viewBox="0 0 1024 1024" width="48" height="48">
                <path d="M768 128h128a85.333333 85.333333 0 0 1 85.333333 85.333333v597.333334a85.333333 85.333333 0 0 1-85.333333 85.333333H128a85.333333 85.333333 0 0 1-85.333333-85.333333V213.333333a85.333333 85.333333 0 0 1 85.333333-85.333333h128V85.333333a42.666667 42.666667 0 0 1 85.333333 0v42.666667h341.333334V85.333333a42.666667 42.666667 0 0 1 85.333333 0v42.666667z m128 85.333333H128v597.333334h768V213.333333z m-85.333333 128v85.333334H213.333333v-85.333334h597.333334z" fill="#409EFF"/>
              </svg>
            </div>
            <span class="module-name">预约管理</span>
          </div>
          
          <div class="module-card" @click="$router.push('/checkup/process')">
            <div class="module-icon">
              <svg viewBox="0 0 1024 1024" width="48" height="48">
                <path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.413333 170.666667 170.666667 323.413333 170.666667 512s152.746667 341.333333 341.333333 341.333333 341.333333-152.746667 341.333333-341.333333S700.586667 170.666667 512 170.666667z m0 128a42.666667 42.666667 0 0 1 42.666667 42.666666v128a42.666667 42.666667 0 0 1-85.333334 0V341.333333A42.666667 42.666667 0 0 1 512 298.666667z m0 298.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v128a42.666667 42.666667 0 0 1-85.333334 0v-128A42.666667 42.666667 0 0 1 512 597.333333z" fill="#67C23A"/>
              </svg>
            </div>
            <span class="module-name">体检流程</span>
          </div>
          
          <div class="module-card" @click="$router.push('/checkup/report')">
            <div class="module-icon">
              <svg viewBox="0 0 1024 1024" width="48" height="48">
                <path d="M213.333333 85.333333h597.333334a85.333333 85.333333 0 0 1 85.333333 85.333334v682.666666a85.333333 85.333333 0 0 1-85.333333 85.333334H213.333333a85.333333 85.333333 0 0 1-85.333333-85.333334V170.666667a85.333333 85.333333 0 0 1 85.333333-85.333334z m597.333334 85.333334H213.333333v682.666666h597.333334V170.666667z m-128 128v85.333333H341.333333v-85.333333h341.333334z m0 170.666666v85.333334H341.333333v-85.333334h341.333334z m-170.666667 170.666667v85.333333H341.333333v-85.333333h170.666667z" fill="#E6A23C"/>
              </svg>
            </div>
            <span class="module-name">报告管理</span>
          </div>
          
          <div class="module-card" @click="$router.push('/checkup/review')">
            <div class="module-icon">
              <svg viewBox="0 0 1024 1024" width="48" height="48">
                <path d="M512 85.333333c235.648 0 426.666667 191.018667 426.666667 426.666667s-191.018667 426.666667-426.666667 426.666667S85.333333 747.648 85.333333 512 276.352 85.333333 512 85.333333z m0 85.333334C323.413333 170.666667 170.666667 323.413333 170.666667 512s152.746667 341.333333 341.333333 341.333333 341.333333-152.746667 341.333333-341.333333S700.586667 170.666667 512 170.666667z m0 128a42.666667 42.666667 0 0 1 42.666667 42.666666v128a42.666667 42.666667 0 0 1-85.333334 0V341.333333A42.666667 42.666667 0 0 1 512 298.666667z m0 298.666666a42.666667 42.666667 0 0 1 42.666667 42.666667v128a42.666667 42.666667 0 0 1-85.333334 0v-128A42.666667 42.666667 0 0 1 512 597.333333z" fill="#F56C6C"/>
              </svg>
            </div>
            <span class="module-name">报告审核</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script setup>
import { useRouter } from 'vue-router'

const router = useRouter()
</script>

<style scoped>
.home-page {
  padding: 20px;
  background-color: #f5f7fa;
  min-height: calc(100vh - 140px);
}

.module-sections {
  display: flex;
  flex-direction: column;
  gap: 30px;
}

.module-section {
  background: white;
  border-radius: 12px;
  padding: 24px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.section-title {
  font-size: 18px;
  font-weight: 600;
  color: #303133;
  margin: 0 0 20px 0;
  padding-bottom: 12px;
  border-bottom: 2px solid #f0f2f5;
}

.module-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 20px;
}

.module-card {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 24px 16px;
  background: #fafbfc;
  border: 1px solid #e4e7ed;
  border-radius: 12px;
  cursor: pointer;
  transition: all 0.3s ease;
  text-align: center;
  min-height: 140px;
  justify-content: center;
}

.module-card:hover {
  background: #f0f9ff;
  border-color: #409EFF;
  transform: translateY(-2px);
  box-shadow: 0 8px 24px rgba(64, 158, 255, 0.15);
}

.module-icon {
  margin-bottom: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  background: white;
  border-radius: 50%;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
}

.module-name {
  font-size: 14px;
  font-weight: 500;
  color: #606266;
  line-height: 1.4;
}

.module-card:hover .module-name {
  color: #409EFF;
}

/* 响应式设计 */
@media (max-width: 1200px) {
  .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 16px;
  }
}

@media (max-width: 768px) {
  .home-page {
    padding: 15px;
  }
  
  .module-section {
    padding: 20px;
  }
  
  .module-grid {
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
  }
  
  .module-card {
    padding: 20px 12px;
    min-height: 120px;
  }
  
  .module-icon {
    width: 56px;
    height: 56px;
  }
  
  .module-icon svg {
    width: 40px;
    height: 40px;
  }
  
  .module-name {
    font-size: 13px;
  }
}

@media (max-width: 480px) {
  .module-grid {
    grid-template-columns: repeat(2, 1fr);
  }
  
  .module-card {
    padding: 16px 8px;
    min-height: 100px;
  }
  
  .module-icon {
    width: 48px;
    height: 48px;
  }
  
  .module-icon svg {
    width: 32px;
    height: 32px;
  }
  
  .module-name {
    font-size: 12px;
  }
}
</style>